<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-descriptions :title="$t('all.autotext24')" />
      </a-col>
      <a-col :span="12" align="right">
        <a-dropdown
          placement="bottomCenter"
          v-if="!WXAuthorized &&  $options.filters.isPtsVisible()"
        >
          <a-button type="primary" style="margin-bottom: 10px;">
            {{ $t('all.autotext41') }}
          </a-button>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="add(1)">{{ $t('all.autotext283') }}</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="add(2)">{{ $t('all.autotext1750') }}</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </a-col>
    </a-row>
    <a-table row-key="id" :pagination="false" :data-source="tableData">
      <a-table-column :title="$t('all.autotext334')" key="id">
        <template slot-scope="text, record, index">
          <span>{{ getTableSequenceNo(index) }}</span>
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext496')" key="bankType" data-index="bankType">
        <template slot-scope="text">
          <span>{{ text | enumValueByKey($const.BANK_TYPE) }}</span>
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext497')" key="bankName" data-index="bankName" />
      <a-table-column
        :title="$t('all.autotext1310')"
        key="bankCardNo"
        data-index="bankCardNo"
        v-if="$options.filters.isPtsVisible()"
      />
      <a-table-column :title="$t('all.autotext977')" key="bankAccount" data-index="bankAccount" />
      <a-table-column :title="$t('all.autotext187')">
        <a-space slot-scope="record">
          <template v-if="!record.defaultCard">
            <a v-if="pts.ptsStatus != 6 && pts.ptsStatus != 3 " @click="setDefault(record)">{{ $t('all.autotext159') }}</a>
            <a-popconfirm :title="$t('all.autotext635')" @confirm="remove(record)">
              <a v-if="pts.ptsStatus != 6 && pts.ptsStatus != 3 ">{{ $t('all.autotext379') }}</a>
            </a-popconfirm>
          </template>
          <span v-else>{{ $t('all.autotext1335') }}</span>
        </a-space>
      </a-table-column>
    </a-table>

    <addBank
      ref="backRef"
      :userId="pts.userAuthorizeId"
      :ptsId="pts.id"
      @refresh="getList()"
    />
  </div>
</template>

<script>
import addBank from './addBank'
import { getBankList, delBank, setDefaultBank } from '@api/account/user'

export default {
  props: {
    pts: {
      type: Object
    }
  },
  components: { addBank },
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    getTableSequenceNo (index) {
      return this.tableData.length - index
    },
    add (e) {
      this.$refs.backRef.open(e)
    },
    async setDefault (row) {
      await setDefaultBank({
        id: row.id,
        userAuthorizeId: this.pts.userAuthorizeId,
        ptsId: this.pts.id
      })
      this.$message.success(this.$t('all.autotext470'))
      this.getList()
    },
    async remove (row) {
      await delBank({ id: row.id })
      this.$message.success(this.$t('all.autotext470'))
      this.getList()
    },
    async getList () {
      const res = await getBankList({ authUserId: this.pts.userAuthorizeId, type: 2, ptsId: this.pts.id })
      this.tableData = res
    }
  },
  watch: {
    pts: {
      handler (val) {
        if (!val?.id) return
        this.getList()
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
